<template>
	  <view>
		
			 
				<view>
					<view style="margin-left: 18rpx;"><text style="color: #C0C0C0;">新的朋友</text></view>
			        <scroll-view :scroll-top="scrollTop" v-for="(item,index) in contactsList" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
			        @scroll="scroll">
						<view style="display: flex;margin-left: 18rpx;">
							<view class="row" style="height: 180rpx;">
								<view >
									<image :src="item.imgHead" style="width: 160rpx;height: 160rpx;margin-top: 10rpx;margin-left: 5rpx;"></image>
								</view>
								<view class="row_right">
									
									<view class="assistant_ly" >
										<text style="flex-direction: inherit;font-size: 40rpx;font-weight: bold;">{{item.name}}</text>
										<text style="flex-direction: inherit;font-size: 30rpx;">{{item.username}}</text>
										<text style="flex-direction: inherit;font-size: 20rpx;color: #C0C0C0;width: 300rpx;">申请原因：{{item.reason}}</text>
										
									</view>
									
									<button @click="passApply(item.id)" class="chat_time" type="primary">同意</button>
									<button @click="backApply(item.id)" class="chat_time" type="warn">拒绝</button>
								</view>
								
							</view>
							
						</view>
			        </scroll-view>
			    </view>
				      
		
			
		
		
		
		
		
		
		
		
		
		</view>
</template>

<script>
		import http from '../../../common/request.js'
	export default {
		onShow(){
			// document.querySelector('.uni-page-head-hd').style.display = 'none'
			this.getMyFriends()
		},

		data() {
			return {
				contactsList:[],
			            scrollTop: 0,
			            old: {
			                scrollTop: 0
			            }
			        }
		},
		methods: {
			
			async getMyFriends() {
				this.contactsList=[]
					const res = await http.request({
						url: '/sys_user/list_apply_friends',
						method:'POST',
						data:{}
					})
				this.contactsList = res.data.data
				
			},
			
			async passApply(id) {
					const res = await http.request({
						url: '/sys_friends/pass_apply?id='+id,
						method:'POST',
						data:{}
					})
					uni.switchTab({
						url:'/pages/index/contacts/contacts'
					})
					
				
			},
			async backApply(id) {
					const res = await http.request({
						url: '/sys_friends/back_apply?id='+id,
						method:'POST',
						data:{}
					})
					uni.switchTab({
						url:'/pages/index/contacts/contacts'
					})
				
			},
			
			onNavigationBarButtonTap:function(e){
				if('加好友'===e.text){
					uni.navigateTo({
						url:'./add_friend'
					})
				}
			},
			upper: function(e) {
			            console.log(e)
			        },
			        lower: function(e) {
			            console.log(e)
			        },
			        scroll: function(e) {
			            console.log(e)
			            this.old.scrollTop = e.detail.scrollTop
			        },
			        goTop: function(e) {
			            this.scrollTop = this.old.scrollTop
			            this.$nextTick(function() {
			                this.scrollTop = 0
			            });
			            uni.showToast({
			                icon:"none",
			                title:"纵向滚动 scrollTop 值已被修改为 0"
			            })
			        }
		}
	}
</script>

<style lang="scss">
	
	page {
		background: #EEEEEE;
	}
	
	.line{
		width: 100%;
		height: 10px;
	}
	.row {
		background: white;
		display: flex;
		width: 100%;
		height: 50px;
	
		.row_logo {
			width: 18%;
			display: flex;
			align-items: center;
	
			image {
				width: 32px;
				height: 32px;
				margin: auto;
				border-radius: 5px;
			}
		}
	
		.row_right {
			position: relative;
			height: 100%;
			width: 84%;
			display: flex;
			align-items: center;
	
			border: {
				bottom: 1px solid #DDDDDD;
			}
	
			text {
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}
			.icon_right{
				position: absolute;
				right: 10px;
				width: 15px;
				height: 15px;
				opacity: .5;
			}
	
		}
	
	
	
	}
	
	.row:last-child {
		.row_right {
			border: 0;
		}
	}
	
.chat_data{
  border-radius: 5rpx;
  padding: 1%;
  margin-top: 2%;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  justify-content: space-between;
}
.chat_header_pic{
  width: 110rpx;
  height: 110rpx;
  border-radius: 10%;
}


.chat_view_pic{
  width: 20%;
}

.chat_info{
  float: left;
  width: 60%;
  margin-top: 3%;
  flex-direction: column;
  display: flex;
}

.line{
  margin-top: 10rpx;
  height: 1rpx;
  width: 100%;
  background-color: #D8D8D8;
}

.navigator{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFE1FF;
  border-radius: 15rpx;
  color: #666;
}

.search_input{
  width: 90%;
  margin: 0 auto;
  height: 90rpx;
  padding: 10rpx;
 
}
.chat_time{
  text-align: center;
  width: 20%;
  font-size: xx-small;
}


.chat_info_name{
  font-size: large;
  font-weight: bold;
}
.chat_info_jie{
  font-size: small;
}
.chat_info_msg{
  font-size: x-small;
  color: darkkhaki;
}
</style>
